<template>
  <!--内容-->
  <div class="container" :style="'background:url('+require('@/assets/login_bk.png')+') no-repeat 100% 100%'">
   <div style="background:#3D84E3;height:370px;width:700px;display:flex;flex-direction:row;border-radius:10px;">
      <div style="height:100%;width:290px;background:white;border-radius:10px 0px 0px 10px;padding-left:45px;padding-top:27px;padding-right:45px">
        <div>Logo</div>
        <div style="margin-top:42px;margin-bottom:12px;font-size: 15px;font-family: Helvetica Neue;font-weight: bold;line-height: 29px;color: #2F3039;opacity: 1;">Login to Your Account</div>
        <el-form
          class="login_input_container"
          ref="loginForm"
          :model="reqData"
          label-position="top"
          size="medium"
        >
          <el-form-item
            style="min-width:200px;font-size:12px;"
            :label="$t('username')"
            prop="username"
            :rules="[
              { required: true, message: `${$t('username')} ${$t('isRequired')}`}
            ]"
          >
            <el-input
              id="inputLoginAccount"
              autofocus
              style="min-width:200px"
              v-model="reqData.username"
              :placeholder="$t('inputLoginAccount')"
            ></el-input>
          </el-form-item>
          <el-form-item
            style="min-width:200px"
            :label="$t('password')"
            prop="password"
            :rules="[
              { required: true, message: `${$t('password')} ${$t('isRequired')}`}
            ]"
          >
            <el-input
              style="min-width:200px"
              :type="passwordText"
              v-model="reqData.password"
              :placeholder="$t('inputPassword')"
            >
              <i
                v-if="passwordText == 'password'"
                slot="suffix"
                class="el-input__icon fa fa-eye pointer"
                @click="passwordText='text'"
              ></i>
              <i
                v-if="passwordText == 'text'"
                slot="suffix"
                class="el-input__icon fa fa-eye-slash pointer"
                @click="passwordText='password'"
              ></i>
            </el-input>
          </el-form-item>
          <el-form-item style="min-width:200px">
            <el-button :loading="isLoading" type="primary" @click="onSubmit" style="min-width:200px">{{$t('login')}}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <img style="width:350px;height:220px;margin-left:30px;margin-top:70px" :src="require('@/assets/right_bk.png')">
   </div>
  </div>
</template>

<script>
import { Message, MessageBox } from "element-ui";
import { setUserInfo } from "@/utils/auth";
import { isvalidUsername } from "@/utils/validate";
import { login } from "@/api/user";
export default {
  data() {
    return {
      passwordText: "password",
      reqData: {
        username: "",
        password: "",
      },
      isLoading:false
    };
  },
  mounted() {
    let inputelement = document.getElementById("inputLoginAccount");
    inputelement.focus();
    //初始化串口信息
    /* window.serialport = require("serialport");
    window.port = null;
    window.comName = null;
    window.cardData = { card: "", cardData: "" };
    let rel = serialport.list();
    rel.then(
      ports => {
        console.log("成功，串口列表为data:", ports);
        this.portList = ports;
        if (window.localStorage.getItem("com")) {
          window.comName = window.localStorage.getItem("com");
          this.com = window.localStorage.getItem("com");
        }
      },
      error => {
        console.log("失败err:", error);
      }
    );
    login("sentinel", "123456").then(res => {
      console.log(res);
    }); */
  },
  methods: {
    onSubmit() {
      this.$refs["loginForm"].validate((valid) => {
        if (valid) {
          this.isLoading = true;
          login(this.reqData.username, this.reqData.password).then((res) => {
            console.log(res.body);
            this.$store.commit("SET_USER_INFO", res.body);
            setUserInfo(res.body);
            Message({
              message: `${this.$t("login") + " " + this.$t("success")}`,
              type: "success",
              duration: 5 * 1000,
            });
            this.$router.push({ name: "chooseProductionPlan" });
            this.isLoading = false;
          }).catch(()=>{
            this.isLoading = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
.container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-size:100% 100%;
}
.logo_image {
  width: 100px;
  height: 100px;
}
.logo_text {
  font-size: 36px;
  letter-spacing: 10px;
  width: 100%;
  text-align: center;
  margin-top: 20px;
  font-weight: bold;
}
.bottom_background {
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 130px;
  background: #304156;
}
.login_desc {
  position: absolute;
  bottom: 85px;
  padding: 0px 120px 0px 120px;
  font-weight: bold;
  color: rgb(255, 208, 75);
  left: 0;
}
.login_desc_en {
  position: absolute;
  bottom: 85px;
  padding: 0px 120px 0px 195px;
  color: rgb(255, 208, 75);
  left: 0;
  font-family: Microsoft YaHei;
  font-style: italic;
}
.login_input_container {
  display: flex;
  flex-direction: column;
  margin: 0px;
  width: 100%;
}
@media (max-width: 500px) {
  .left_container {
    flex: 65px 0 0;
  }
}
</style>
<style>
.login_input_container .el-form-item__label {
  color: #333333 !important;
  line-height: 20px!important;
  padding:0px!important;
  font-size:12px!important;
}
.login_input_container .el-input--medium .el-input__inner{
 line-height:30px!important; 
 height:30px!important;
}
.login_input_container button{
  height:30px!important;
  line-height:30px!important;
  padding:0px!important;
}
/* .login_input_container button span{ 
  height:30px!important;
  line-height:30px!important;
  display: inline-block;
  vertical-align: top;
} */
</style>
